<template>
  <div class="user-statistics">
    <el-row>
      <el-col :span="12">
        <el-card>
          <h3>新用户统计</h3>
          <el-table :data="newUsers" stripe>
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="count" label="新增用户数" width="180"></el-table-column>
            <el-table-column prop="growth" label="增长率" width="180"></el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <h3>用户增长趋势</h3>
          <div v-for="(user, index) in newUsers" :key="index" style="margin-bottom: 15px;">
            <div>{{ user.date }} - 增长率: {{ user.growth }}</div>
            <el-progress :percentage="user.growthPercentage" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from "axios";

// 新用户数据，包括日期、新增用户数和增长率
const newUsers = ref([])
axios.get('http://localhost:8813/newUsers/getNewUsers').then(res=>{
  console.log(res)
  newUsers.value=res.data.data
})
</script>

<style scoped>
.user-statistics {
  padding: 20px;
}
</style>
